import { useState } from 'react'
import { Header } from '@/components/layout/Header'
import { Banner } from '@/components/home/Banner'
import { FeaturedBooks } from '@/components/home/FeaturedBooks'
import { FeaturedActivities } from '@/components/home/FeaturedActivities'
import { CategoryGrid } from '@/components/home/CategoryGrid'
import { BottomNav } from '@/components/ui/BottomNav'
import { useNavigate } from 'react-router-dom'

export function HomePage() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('home')
  
  const handleBookClick = (book: any) => {
    navigate(`/books/${book.id}`)
  }
  
  const handleActivityClick = (activity: any) => {
    navigate(`/activities/${activity.id}`)
  }
  
  const handleTabChange = (tab: string) => {
    setActiveTab(tab)
    switch (tab) {
      case 'home':
        navigate('/')
        break
      case 'books':
        navigate('/books')
        break
      case 'activities':
        navigate('/activities')
        break
      case 'records':
        navigate('/reading-record')
        break
      case 'profile':
        navigate('/profile')
        break
    }
  }
  
  return (
    <div className="min-h-screen bg-huiben-cream pb-20">
      <Header />
      
      <main className="page-transition">
        <Banner />
        <FeaturedBooks onBookClick={handleBookClick} />
        <FeaturedActivities onActivityClick={handleActivityClick} />
        <CategoryGrid />
      </main>
      
      <BottomNav activeTab={activeTab} onTabChange={handleTabChange} />
    </div>
  )
}